<template>
  <div>
    <div class="head">
      <div class="input-box">
        <xIcon href="icon-sousuo"></xIcon>
        <input
          type="text"
          name=""
          id=""
          placeholder="搜索你想要的课程"
          v-model="keyword"
          @keydown.enter="searchHandler"
        />
      </div>

      <span class="cancel" @click="back">取消</span>
    </div>
    <!-- 搜索结果列表 -->
    <div class="search-list">
      <sessionContent
        v-for="(item, index) in searchList"
        :key="index"
        :sessionData="item"
      ></sessionContent>
    </div>
    <template v-if="loading">
        <div class="loading">
           <MyLoading></MyLoading>
        </div>
    </template>
  </div>
</template>

<script>
import { get } from "@/utils/http.js";
import sessionContent from "@/components/sessionContent";
import MyLoading from '@/globalcmp/myLoading/myLoading.vue';
export default {
  data() {
    return {
      keyword: "",
      searchList: [],
      loading: false,
    };
  },
  components: {
    sessionContent,
    MyLoading,
    
},
  methods: {
    async searchHandler() {
        this.loading=true
      this.searchList = await get("/session/search/" + this.keyword, {
        "Content-Type": "application/json; charset=utf-8",
      });
      this.loading=false
    },
    back(){
      this.$router.back()
    }
  },
};
</script>

<style lang="scss" scoped>
.head {
  height: 30px;
  display: flex;
  justify-content: space-evenly;
  margin: 10px;
  align-items: center;
  .input-box {
    width: 290px;
    height: 36px;
    background-color: rgba(242, 242, 242, 0.258823529411765);
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    input {
      width: calc(100% - 80px);
      outline: none;
      font-size: 14px;
      line-height: 30px;
      border: none;
      margin-left: 10px;
      
    }

  }
  .search {
    width: calc(100% - 80px);
    display: inline-block;
    background-color: white;
    color: #ccc;
    border: 1px solid #ccc;
    font-size: 14px;
    padding-left: 5px;
    line-height: 30px;
  }
      span{
        font-size: 12px;
        color: #ccc;
        cursor: pointer;
    }
}
.search-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 12px;
}
.loading{
    position: fixed;
    top: 200px;
    width: 100%;
    height: 200px;
}
</style>